import React, { useEffect, useState } from 'react'
import style from './style.module.css'
import { useNavigate } from 'react-router-dom'
import Navbar from '../../../components/Navbar/Index'
import Screen from '../../../components/Screen/index'
import HouseList from '../../../components/houseList/Index'
import { LeftOutline } from 'antd-mobile-icons'
import { useSelector, useDispatch } from 'react-redux'
function OldHouse() {
    const navigate = useNavigate()
    const houseList = useSelector(state => state.newHouserSlice.new_house_list)
    console.log(houseList);
    const [list, setList] = useState(houseList)
    const searchfn = (val) => {
        console.log(val, 'val');
        if (!val) {
            setList(houseList)
            return
        }
        let jsonList = JSON.parse(JSON.stringify(list))
        let newList = []
        jsonList.forEach(item => {
            if (item.title.includes(val)) {
                item.title = item.title.replace(val, `<b style='color:red'>${val}</b>`)
                newList.push(item)
            }
        })
        console.log(newList);
        setList(newList)
    }
    //区域
    const handleRegionScreen = (val) => {
        console.log(val);
        if (val == '全部') {
            setList(houseList)
            return
        }
        let newList = list.filter(item => {
            return item.city == val
        })
        setList(newList)
    }
    // 价格
    const handlePriceScreen = (val) => {
        console.log(val);
        let newList = list.filter(item => {
            return item.price > val
        })
        setList(newList)
    }
    const handleHouseTypeScreen = (val1, val2) => {
        if (val1 == '不限') {
            val1 = ''
        }
        if (val2 == '不限') {
            val2 = ''
        }
        console.log('val1', val1, 'val2', val2);
        let newList = list.filter(item => {
            return item.type.includes(val1) && item.houseType.includes(val2)
        })
        setList(newList)
    }
    const handleOrientationScreen = (val1, val2) => {
        if (val2 == '不限') {
            val2 = ''
        }
        if (val1 == '安选') {
            let newList = list.filter(item => {
                return item.isSelect && item.orientation.includes(val2)
            })
            setList(newList)
        } else {
            let newList = list.filter(item => {
                return item.orientation.includes(val2)
            })
            setList(newList)
        }

    }
    return (
        <div style={{ display: 'flex', flexDirection: 'column', width: '100vw', height: '100vh' }}>
            <div className={style['header']}>
                <Navbar title={<div>二手房</div>} nav_left={<div style={{
                    position: 'fixed',
                    left: '15px'
                }}
                    onClick={() => navigate(-1)}
                ><LeftOutline fontSize={'16px'} /></div>} nav_footer={<div style={{ height: '30px' }}></div>} />
                <Screen
                    flag={'buy-house'}
                    searchfn={searchfn}
                    handleRegionScreen={handleRegionScreen}
                    handlePriceScreen={handlePriceScreen}
                    handleHouseTypeScreen={handleHouseTypeScreen}
                    handleOrientationScreen={handleOrientationScreen}
                ></Screen>
            </div>
            <div style={{ flex: 1, overflow: 'auto' }}>
                <HouseList houseList={list}></HouseList>
            </div>
        </div>
    )
}

export default OldHouse